<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="common/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="common/css/loading.css" />
		<script src="common/js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="common/js/base.js" type="text/javascript" charset="utf-8"></script>
		<script src="common/js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			body {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				font-family: "微软雅黑";
			}
			
			.footer {
				position: fixed;
				bottom: 0;
			}
			
			.weui-tabbar__item:nth-child(3) i,
			.weui-tabbar__item:nth-child(3) p {
				color: red;
			}
			
			.header {
				height: 45px;
				line-height: 45px;
				background: #F4F4F4;
				color: #616161;
				font-size: 18px;
				border-bottom: 1px solid #bbb;
				text-align: center;
			}
			
			.header .icon {
				width: 20px;
				position: absolute;
				left: 10px;
			}
			
			.address {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				position: relative;
				top: 0;
				background-color: #fff;
				padding: 14px 13px 12px 10px;
			}
			
			.address b {
				position: absolute;
				bottom: 1px;
				left: 0;
				height: 3px;
				width: 100%;
				background: url(img/location-border.png) repeat-x;
				background-size: 80px 4px;
			}
			
			.address .info {
				display: -webkit-box;
				height: 30px;
				color: #252525;
				font-size: 16px;
				font-weight: 800;
				-webkit-box-align: center;
				margin-left: 10px;
			}
			
			.address .phone {
				margin-left: 40px;
			}
			
			.address .detail {
				display: -webkit-box;
				font-size: 14px;
				color: #232326;
				line-height: 22px;
				margin-left: 10px;
				-webkit-box-orient: vertical;
			}
			
			.products {
				display: -webkit-box;
				overflow: hidden;
				margin-left: 15px;
				margin-top: 15px;
			}
			
			.products .item img {
				width: 50px;
				height: 50px;
			}
			
			.products .item {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				height: 70px;
				font-size: 12px;
				margin-right: 8px;
			}
			
			.products .item .num {
				display: -webkit-box;
				-webkit-box-align: center;
				-webkit-box-pack: center;
			}
			
			.products .hidden {
				display: -webkit-box;
				-webkit-box-flex: 1;
				-webkit-box-align: center;
				-webkit-box-pack: end;
				margin-right: 20px;
				font-size: 14px;
			}
			
			.products .hidden .icon {
				width: 20px;
				height: 4px;
				background-size: contain;
				background-image: url(img/shenglv.png);
			}
			
			.ticket {
				display: -webkit-box;
				height: 60px;
				margin-top: 10px;
				border-top: 1px solid gainsboro;
				font-size: 15px;
				-webkit-box-pack: justify;
				color: #262629;
				padding-bottom: 5px;
				border-bottom: 1px solid gainsboro
			}
			
			.ticket>div:nth-child(1) {
				margin: 20px 0 0 15px;
			}
			
			.ticket>div:nth-child(2) {
				margin: 10px 15px 0 0;
			}
			
			.total {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				margin-top: 5px;
			}
			
			.total .price,
			.total .extra {
				display: -webkit-box;
				-webkit-box-orient: horizontal;
				margin: 0 15px 0 15px;
			}
			
			.total .number {
				width: 50px;
				color: #f23030;
				-webkit-box-pack: end;
			}
			
			.total .price>div,
			.total .extra>div {
				display: -webkit-box;
				-webkit-box-flex: 1;
			}
			
			.btn {
				display: -webkit-box;
				width: 100%;
				height: 40px;
				position: fixed;
				left: 0px;
				bottom: 0px;
				-webkit-box-align: center;
				-webkit-box-pack: center;
			}
			
			.btn>div {
				display: -webkit-box;
				-webkit-box-flex: 1;
				-webkit-box-pack: center;
				-webkit-box-align: center;
				height: 40px;
				color: white;
				font-size: 16px;
			}
			
			.btn .buy {
				background-color: #F23030;
			}
			
			.btn .cannel {
				background-color: #FFB03F;
			}
			
			.istrue {
				display: block;
			}
		</style>
	</head>

	<body ontouchstart>
		<div class="csshub-loading" v-if="isLoading">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
		<div v-if="!isLoading">
			<div class="header">
				<i class="icon Hui-iconfont" @click="failure">&#xe6d4;</i>填写订单
			</div>
			<div class="address" v-for="item in address">
				<div class="info">
					<div class="name" v-html="item.attributes.username"></div>
					<div class="phone" v-html="item.attributes.phone"></div>
				</div>
				<div class="detail">
					<div v-html="item.attributes.area"></div>
					<div v-html="item.attributes.address"></div>
				</div>
				<b></b>
			</div>
			<div class="products">
				<div class="item" v-for="item in order">
					<img v-bind:src="item.attributes.image[0]" />
				</div>
				<div class="hidden">
					<div class="icon" v-bind:class="{'isTrue':istrue}"></div>
				</div>
				<div class="hidden">
					共
					<div v-html="all"></div>件
				</div>
			</div>
			<div class="ticket">
				<div>发票信息</div>
				<div>
					<div>纸质发票-个人</div>
					<div>非图书商品-明细</div>
				</div>
			</div>
			<div class="total">
				<div class="price">
					<div>商品金额</div>
					<div class="number" v-html="total"></div>
				</div>
				<div class="extra">
					<div>运费</div>
					<div class="number">6.00</div>
				</div>
			</div>
			<div class="btn">
				<div class="cannel" @click="failure">取消付款</div>
				<div class="buy" @click="success">确认付款</div>
			</div>
		</div>
		<script src="common/js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="common/js/fastclick.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				FastClick.attach(document.body);
			});
		</script>
		<script src="vue/buyVue.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>